<template>
    <div class="rx-form-item-box" :class="['rx-'+item.type]" v-if="showControl(item)">
        <div v-if="item.type=='subTable' && showControl(item)" class="m-sub-table">
            <MFormItem v-model="data['sub__'+item.field]" :data="data" :metadata="item"
                       :readOnly="curReadOnly(item)" :ref="item.key"
                       :required="curRequired(item)"></MFormItem>
        </div>
        <grouping-layout  v-else-if="item.type=='grouping' && showControl(item) " :ref="item.key" :data="data" :metadata="item"></grouping-layout>
        <grid-layout v-else-if="item.type=='grid' && showControl(item) " :ref="item.key" :data="data" :metadata="item"/>
        <table-layout v-else-if="item.type=='table' && showControl(item) " :ref="item.key" :data="data" :metadata="item"/>
        <div v-else-if="item.type=='tabs' && showControl(item)" style="margin-top: 10px">
            <tabs-layout :ref="item.key" :data="data" :metadata="item"></tabs-layout>
        </div>
        <div v-else-if="item.type=='collapse' && showControl(item)" style="margin-top: 10px">
            <collapse-layout :ref="item.key" :data="data" :metadata="item"></collapse-layout>
        </div>
        <div v-else-if="item.type=='logo' && showControl(item)">
            <logo-layout :ref="item.key" :data="data" :metadata="item"></logo-layout>
        </div>
        <div v-else-if="item.type=='oneTable' && showControl(item)" style="margin-top: 10px">
            <m-one-table v-model="data['sub__'+item.field]" :ref="item.key" :data="data" :metadata="item" :readOnly="curReadOnly(item)"/>
        </div>
        <template v-else>
            <div class="MFormItem-item">
                <template v-if="hasShowOrIf(item) === 'show'">
                    <MFormItem v-if="showControl(item)" :ref="item.key" v-model="data[item.field]" :data="data"
                               :metadata="item"
                               :readOnly="curReadOnly(item)" :required="curRequired(item)"></MFormItem>
                </template>
                <template v-else>
                    <MFormItem v-if="showControl(item)" :ref="item.key" v-model="data[item.field]" :data="data"
                               :metadata="item"
                               :readOnly="curReadOnly(item)" :required="curRequired(item)"></MFormItem>
                </template>
            </div>
        </template>

    </div>
</template>

<script>
import RxForm from "./js/JsRxForm"
import FormBase from "../../components/js/FormBase";
import MFormItem from '../../MForm/MFormItem/MFormItem';
import MOneTable from '../../components/MOneTable/MOneTable';
import gridLayout from './layout/gridLayout';
import tableLayout from './layout/tableLayout';
import tabsLayout from './layout/tabsLayout';
import collapseLayout from './layout/collapseLayout';
import logoLayout from './layout/logoLayout';
import groupingLayout from './layout/groupingLayout';

export default {
    name: "RxFormItem",
    mixins: [RxForm, FormBase],
    props: {
        /**
         *元数据
         */
        item: {
            type: Object
        },
        /**
         * 表单数据
         */
        data: {
            type: Object
        },
        readOnly:{
            default:false
        }
    },
    data() {
        return {
            createdShow: true
        }
    },
    components: {
        MFormItem,
        MOneTable,
        gridLayout,
        tableLayout,
        tabsLayout,
        collapseLayout,
        logoLayout,
        groupingLayout
    }

}
</script>

<style scoped>
.m-sub-table {
    margin: 0.5rem 0rem;
    background: white;
    overflow: hidden;
}
.m-sub-table >>>.rx-center{
    box-shadow:none;
}
.MFormItem-item {
    padding: 0.5rem 1rem;
    background: white;
}
.rx-dataList .MFormItem-item{
    background: #f4f5f6;
    padding: 0rem;
}
.rx-dataList>>>.rx-center{
    margin-top: 0rem;
}
.rx-dataList>>>.DataList-list{
    border-radius: 0rem;
}
</style>
